<template>
    <div class="newVsOld" style="background-image: url(static/img/bg4.jpg);">
        <div class="dark-cover"></div>
        <div class="cnt">
            <h1>上面家教<span>1对1</span>，值得信赖</h1>
            <div class="vs">
                <img src="static/img/vs.png" alt="vs" />
            </div>
            <ul class="ul-wrap">
                <li>
                    <div class="text_left">
                        足不出户，名师上门<br>
                        1对1辅导面对面沟通更顺畅
                    </div>
                    <div class="text_mid"> 环境</div>
                    <div class="text_right">
                        交通不便，耽误时间<br />
                        大班上课干扰因素多
                    </div>
                </li>
                <li>
                    <div class="text_left">
                        一线名校认证名师笔试面试<br>
                        层层筛选教学经验有保证
                    </div>
                    <div class="text_mid"> 师资</div>
                    <div class="text_right">
                        照本宣科的反复讲<br />
                        不会的又不讲
                    </div>
                </li>
                <li>
                    <div class="text_left">
                        大数据匹配老师定制化家教<br>
                        课程重难点针对性强
                    </div>
                    <div class="text_mid special"> 教学特点</div>
                    <div class="text_right">
                        课程内容固化无法<br />
                        照顾到每个学生
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>

</script>

<style scoped>
    .newVsOld {
        position: relative;
        height: 6.6rem;
        /*background-image: url(../../static/img/bg4.jpg);*/
        background-size: cover;
    }
    .dark-cover, .cnt {
        position: absolute;
        width: 100%;
        height: 100%;
    }
    .dark-cover {
        background: rgba(58,58,68,.9);
    }
    .cnt h1 {
        font-size: .36rem;
        color: #fff;
        margin: .2rem 0 .1rem;
    }
    .cnt h1 span {
        color: #fead29;
        font-weight: bold;
    }
    .vs img {
        width: .73rem;
    }
    .ul-wrap {
        margin-top: .1rem;
        padding: 0 .2rem;
    }
    .ul-wrap li {
        position: relative;
        width: 100%;
        height: 1.54rem;
        background-image: url(../../static/img/text_bg.png);
        background-size: 100%;
        font-size: .24rem;
        color: #fff;
        text-align: left;
    }
    .ul-wrap li>div {
        display: inline-block;
        position: absolute;
    }
    .text_left {
        left: 0;
        top: 0;
        padding: .2rem 0 0 .1rem;
    }
    .text_right {
        width: 50%;
        right: 0;
        bottom: 0;
        padding: 0rem 0 .25rem 1rem;
        box-sizing: border-box;
    }
    .text_mid {
        color: #6b6b6b;
        width: 1rem;
        height: 1rem;
        top: 50%;
        left: 50%;
        margin: -0.5rem 0 0 -0.5rem;
        font-size: .32rem;
        text-align: center;
        line-height: .95rem;
        padding-left: .05rem;
    }
    .text_mid.special {
        width: .8rem;
        line-height: 1.1;
        padding: .15rem 0 0 .12rem;
    }
    @media screen and (max-width: 320px) {
        .text_right {
            padding: 0rem 0 .2rem .75rem;
        }
    }
</style>
